<section class="demo-section" style="width: 400px">
  <div>
    <input
      #inputValidate="dValidateRules"
      dTextInput
      autocomplete="off"
      name="singleInput"
      maxlength="11"
      placeholder="Input"
      [(ngModel)]="singleInputData"
      [dValidateRules]="{
        messageShowType: 'none',
        validators: [
          { required: true },
          { minlength: 3 },
          { maxlength: 10 },
          { pattern: isAlphabetPattern, message: 'The password must contain only letters and digits.' }
        ]
      }"
      (dRulesStatusChange)="inputErrorChange($event)"
    />
    <p *ngIf="inputValidate.showError && inputValidate.errorMessage" class="error-message">{{ inputValidate.errorMessage }}</p>
  </div>
  <br />
  <div>
    <input
      dTextInput
      autocomplete="off"
      name="singleInput1"
      maxlength="11"
      placeholder="Input"
      [(ngModel)]="singleInputData1"
      [dValidateRules]="{
        popPosition: 'bottom',
        validators: [
          { required: true },
          { minlength: 3 },
          { maxlength: 10 },
          { pattern: isAlphabetPattern, message: 'The password must contain only letters and digits.' }
        ]
      }"
      [dValidatePopConfig]="{
        zIndex: 1000
      }"
    />
  </div>
</section>
